
  <!-- Left side column. contains the sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="{{HTML_URL_BASE}}/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>Alexander Pierce</p>
          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
        </div>
      </div>
      <!-- search form -->
      <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
              <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
        </div>
      </form>
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <!-- sidebar menu of zhaoxp starts -->
      <ul class="sidebar-menu">
        <li class="header">MAIN NAVIGATION</li>
        <li class="{% if globals().get('m0') %}active {%end%}treeview">
          <a href="{{HTML_URL_BASE}}/">
            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
          </a>
        </li>
        <!-- usergroup(user|group) -->
        <li class="{% if globals().get('m1') %}active {%end%}treeview">
          <a href="#">
            <i class="fa fa-user-plus"></i>
            <span>User&Group</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="{% if globals().get('m11') %}active{%end%}"><a href="{{HTML_URL_BASE}}/pages/ug/users">&nbsp;&nbsp;&nbsp;<i class="fa fa-user"></i> User</a></li>
            <li class="{% if globals().get('m12') %}active{%end%}"><a href="{{HTML_URL_BASE}}/pages/ug/groups">&nbsp;&nbsp;&nbsp;<i class="fa fa-users"></i> Group</a></li>
          </ul>
        </li>
        <!-- resource(System|host) -->
        <li class="{% if globals().get('m2') %}active {%end%}treeview">
          <a href="#">
            <i class="fa fa-sitemap"></i>
            <span>Resource</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="{% if globals().get('m21') %}active{%end%}"><a href="{{HTML_URL_BASE}}/pages/res/datacenters">&nbsp;&nbsp;&nbsp;<i class="fa fa-building"></i> DataCenter</a></li>
            <li class="{% if globals().get('m22') %}active{%end%}"><a href="{{HTML_URL_BASE}}/pages/res/systems">&nbsp;&nbsp;&nbsp;<i class="fa fa-cube"></i> System</a></li>
            <li class="{% if globals().get('m23') %}active{%end%}"><a href="{{HTML_URL_BASE}}/pages/res/hosts">&nbsp;&nbsp;&nbsp;<i class="fa fa-server"></i> Host</a></li>

          </ul>
        </li>
        <li class="{% if globals().get('m3') %}active {%end%}treeview">
          <a href="#">
            <i class="fa fa-user-secret"></i>
            <span>Permission</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="{% if globals().get('m31') %}active{%end%}"><a href="{{HTML_URL_BASE}}/pages/perm/resource">&nbsp;&nbsp;&nbsp;<i class="fa fa-sitemap"></i> System|Host</a></li>
            <li class="{% if globals().get('m32') %}active{%end%}"><a href="{{HTML_URL_BASE}}/pages/perm/usergroup">&nbsp;&nbsp;&nbsp;<i class="fa fa-users"></i> User|Group</a></li>
            <li class="{% if globals().get('m33') %}active{%end%}"><a href="{{HTML_URL_BASE}}/pages/perm/permlist">&nbsp;&nbsp;&nbsp;<i class="fa fa-list-alt"></i> Permission List</a></li>
          </ul>
        </li>
        <!-- Permission -->
        <li class="{% if globals().get('m4') %}active {%end%}treeview">
          <a href="#">
            <i class="fa fa-briefcase"></i>
            <span>Utility</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="{% if globals().get('m41') %}active{%end%}"><a href="{{HTML_URL_BASE}}/pages/util/fileupload">&nbsp;&nbsp;&nbsp;<i class="fa fa-upload"></i> File Upload</a></li>
            <li class="{% if globals().get('m42') %}active{%end%}"><a href="{{HTML_URL_BASE}}/pages/util/filedownload">&nbsp;&nbsp;&nbsp;<i class="fa fa-download"></i> File Download</a></li>
          </ul>
        </li>
        <li class="{% if globals().get('m5') %}active {%end%}treeview">
          <a href="{{HTML_URL_BASE}}/pages/setting">
            <i class="fa fa-asterisk"></i> <span>Setting</span>
          </a>
        </li>
      </ul>
      <!-- sidebar menu of zhaoxp  ends  -->
      </section>
    <!-- /.sidebar -->
  </aside>
